<div id="pagenavi" class="wp-pagenavi">
    <span class="pages">Page {{ paginator.Current }} of {{ paginator.Total }}</span>

</div>
<script type="text/javascript">
    function append(n, tag, value, attr)
    {
        var e = document.createElement(tag);
        e.innerText = value;
        var s;
        for(s in attr){
            e.setAttribute(s, attr[s]);
        }
        n.appendChild(e);
    }
</script>
<script type="text/javascript">
    var navi = document.getElementById('pagenavi');
    var total = {{ paginator.Total }};
    var current = {{ paginator.Current }};
    var first = current - 2;

    if(first > 1)
    {
        append(navi, 'a', '« First',{
            'class': 'first',
            'href': 'http://{{ host }}/'
        });
        append(navi, 'span', '...', {'class': 'extend'});
    }else
    {
        first = 1;
    }

    for(i=first; i<current; i++)
    {
        append(navi, 'a', i, {
            'class' : 'page larger',
            'href': 'http://{{ host }}/page/' + i + '/'
        });
    }

    append(navi, 'span', i, {'class': 'current'});

    var last = current + 2;
    if( last > total )
        last = total;

    for(i=current+1; i<=last; i++)
    {
        append(navi, 'a', i, {
            'class' : 'page smaller',
            'href': 'http://{{ host }}/page/' + i + '/'
        });
    }

    last = current + 2;
    if(last < total)
    {
        append(navi, 'span', '...', {'class':'extend'});
        append(navi, 'a', 'Last »',{
            'class': 'last',
            'href': 'http://{{ host }}/page/' + total + '/'
        });
    }
</script>